<template>
<div class="main">
    <!--左侧导航栏-->
    <div class="left_nav">
        <div class="title">推荐</div>
        <div class="nav_item iconfont " v-for="(item,index) in RecomNav" :key="index" :class="[currentIndex == index ? activeNavClass : '',item.iconClass]" @click="changeNav(index,item.id)">
            {{item.title}}
        </div>
        <div class="title">我的音乐</div>
        <div class="nav_item iconfont " v-for="(item,index) in myMusicNav" :key="'m' + index" :class="[currentIndex == 'm' + index ? activeNavClass : '',item.iconClass]" @click="changeNav('m' + index,item.id)">
            {{item.title}}
        </div>
        <div class="createList" @click="openPlayList(0)">
            <div class="title">创建的歌单</div>
            <div class="iconfont " :class="createFlag ? 'iconjiantou' : 'iconarrow_right'"></div>
        </div>
        <div v-if="createFlag" class="nav_item iconfont" v-for="(item,index) in createListNav" :key="'c' + index" :class="[currentIndex == 'c' + index ? activeNavClass : '',item.iconClass]" @click="changeNav('c' + index,item.id)">
            {{item.title.length > 9 ? item.title.slice(0,10) + '...' : item.title}}
        </div>
        <div class="createList" @click="openPlayList(1)" v-if="lsLogin">
            <div class="title">收藏的歌单</div>
            <div class="iconfont" :class="subscribeFlag ? 'iconjiantou' : 'iconarrow_right'"></div>
        </div>
        <div v-if="subscribeFlag" class="nav_item iconfont" v-for="(item,index) in subListNav" :key="'s' + index" :class="[currentIndex == 's' + index ? activeNavClass : '',item.iconClass]" @click="changeNav('s' + index,item.id)">
            {{item.title.length > 9 ? item.title.slice(0,10) + '...' : item.title}}
        </div>
    </div>
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
</div>
</template>

<script>
import bus from '../../../util/bus'
export default {
    name: 'Main',
    props: [

    ],
    data() {
        return {
            // 导航列表
            RecomNav: [{
                    id: 1,
                    title: '发现音乐',
                    iconClass: "iconyinle",
                    path: '/findMusic'
                },
                {
                    id: 1,
                    title: '私人FM',
                    iconClass: "iconFM_weixuanze",
                    path: '/myFM'
                },
                {
                    id: 1,
                    title: 'LOOK直播',
                    iconClass: "iconzhibo",
                },
                {
                    id: 1,
                    title: '视频',
                    iconClass: "iconshipin",
                },
                {
                    id: 1,
                    title: '朋友',
                    iconClass: "iconpengyou",
                },
            ],
            myMusicNav: [{
                    id: 2,
                    title: '本地音乐',
                    iconClass: "iconyinle1",
                },
                {
                    id: 2,
                    title: '下载管理',
                    iconClass: "iconxiazai",
                },

            ],
            createListNav: [{
                title: '我喜欢的音乐',
                iconClass: "iconxihuan",
            }, ],
            subListNav: [

            ],
            // 登陆后展示
            loginNav: [{
                    id: 2,
                    title: '我的音乐云盘',
                    iconClass: "iconcloudyunfuwuyunpanyun",
                },
                {
                    id: 2,
                    title: '我的电台',
                    iconClass: "icondiantai",
                },
                {
                    id: 2,
                    title: '我的收藏',
                    iconClass: "iconfuwuchuangA",
                },
            ],
            currentIndex: 0,
            activeNavClass: 'navLight',
            lsLogin: false,
            createFlag: false,
            subscribeFlag: false,

        };
    },
    computed: {

    },
    created() {
        bus.$on('isLogin', (res => {
            // 登录后更新歌单
            if (res) {
                this.lsLogin = true
                // 获取用户歌单
                this.loginNav.map((val, index) => {
                    this.myMusicNav.push(val)
                    setTimeout(() => {
                        this.addPlaylist()
                    }, 800)

                })
            }
        }))
        if (sessionStorage.getItem('cloud_cookie')) {
            this.lsLogin = true
            this.loginNav.map((val, index) => {
                this.myMusicNav.push(val)
            })
            this.addPlaylist()

        }
    },
    mounted() {

    },
    watch: {

    },
    methods: {
        changeNav(index, id) {
            this.currentIndex = index
            // 判断点击跳转路由
            let mReg = /^m/
            let cReg = /^c/
            let sReg = /^s/
            console.log(index, id)
            if (cReg.test(index) || sReg.test(index)) {
                this.$router.push({
                    path: '/playListDetail',
                    query: {
                        id
                    }
                })
            } else {
                this.$router.push(this.RecomNav[index].path)
            }
        },
        // 打开歌单列表
        openPlayList(index) {
            if (index == 0) {
                this.createFlag = !this.createFlag
            }
            if (index == 1) {
                this.subscribeFlag = !this.subscribeFlag
            }
        },
        addPlaylist() {
            // 创建的歌单
            let uid = JSON.parse(sessionStorage.getItem('cloudUser')).userId
            let createPlaylist = JSON.parse(sessionStorage.getItem('myPlaylist'))
            createPlaylist.forEach((val, index) => {
                let Playlist_item = {
                    id: val.id,
                    title: val.name,
                    path: '/playListDetail',
                    iconClass: "icondingdan",
                }
                if (index == 0) {
                    this.createListNav[0].id = val.id
                    this.createListNav[0].path = '/playListDetail'
                    return false
                }
                if (uid == val.userId) {
                    this.createListNav.push(Playlist_item)
                } else {
                    this.subListNav.push(Playlist_item)
                }
            })

        }
    },
    filters: {
        textFormat(el) {
            if (el.length > 9) {
                return el.slice(0.7) + '...'
            } else {
                return el
            }

        }
    },
    components: {

    },
};
</script>

<style lang="less" scoped>
@itemecolor: #192a56;
@textColor: #fff;
@headTextColor: #eec1c1;

.position_flex(@jc: space-between, @ai: center) {
    display: flex;
    align-items: @ai;
    justify-content: @jc;

}

.main {
    .position_flex(flex-start, flex-start);
    margin-top: 49px;

    .left_nav {
        width: 15vw;
        height: calc(100vh - 49px * 2 - 82px);
        overflow: auto;
        background: #273c75;
        box-shadow: inset -20px 20px 60px #1c2c55,
            inset 20px -20px 60px #324c95;

        div {
            height: 2rem;
            line-height: 2rem;
            position: relative;
            color: @textColor;
        }

        .createList {
            .position_flex;
            cursor: pointer;

            .iconfont {
                margin-right: 10px;
                font-size: 18px;
            }
        }

        .title {
            color: @headTextColor;
            margin-left: 10px;
        }

        .nav_item {
            padding-left: 18px;

            &:hover {
                color: #fbc531;
                cursor: pointer;
            }
        }

        .navLight {
            background-color: #E6E7EA;
            color: @itemecolor;

            &::before {
                content: '';
                display: inline-block;
                position: absolute;
                left: 0;
                width: 3px;
                height: 100%;
                background-color: @itemecolor;
            }

            ;
        }

    }

    /*滚动条样式*/
    .left_nav::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }

    .left_nav::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px #C8C8C8;
        background: rgba(0, 0, 0, 0.2);
    }

    .left_nav::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px #C8C8C8;
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }
}
</style>
